<template>
<div class="newsinfo-container">
  <h3 class="title">{{ newsinfo.title }}</h3>
  <p class="subtitle">
      <span>发表时间：{{ newsinfo.add_time | dateFormat }}</span>
      <span>点击：{{ newsinfo.click }}次</span>
  </p>
  <div class="content" v-html="newsinfo.content"></div>

  <!-- 评论-子组件 -->
  <!-- 这里需要 父组件向子组件传值 -->
  <comment-box :id="id"></comment-box>
</div>
</template>
<script>
//1、导入评论子组件
import comment from './subcomponents/comment.vue'


export default {
  data(){
      return {
        //   id:this.$route.query.id,
          id:this.$route.params.id,//通过 $route.params.id 获取到 url上id值，再同过ajax请求渲染出与之对应的页面
          newsinfo:{//新闻对象

          }
      }
  },
  created(){
      this.getNewsinfo()
    //   console.log(this.newsinfo)
  },
  methods:{
      getNewsinfo(){//获取新闻详情
        this.$http.get("api/getnew/" + this.id).then(result=>{
            if(result.body.status === 0){
                this.newsinfo = result.body.message[0]
            }else {
                Toast('获取新闻详情资讯失败!')
            }
        })
      }
  },
  components:{//用来注册子组件
    "comment-box":comment
  }
}
</script>
<style <style lang="less" scoped>

    .newsinfo-container {
        padding: 0 8px;
        .title {
            font-size: 16px;
            text-align: center;
            margin: 15px 0;
            color: hotpink;
            line-height: 30px;
        }
        .subtitle {
            font-size: 13px;
            color: #226aff;
            display: flex;
            justify-content: space-between;
        }
        .content /deep/ img { //深度作用选择器，如果是用的less或者scss 需要像这样 父子之间加上 /deep/,
        // 如果单纯的是 Style 只需要 >>>
             width: 100%;
        }
        
    }




</style>
